{% extends 'base.html' %}

{% block body %}

<!-- ===== Alert Messages ===== -->
{% for message in messages %}
<div class="alert alert-info alert-dismissible fade show shadow-sm my-3 mx-3 text-center" role="alert">
  <strong>{{ message }}</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}

<!-- ===== OTP Verification Section ===== -->
<section class="otp-section py-5">
  <div class="container d-flex justify-content-center align-items-center" style="min-height: 80vh;">
    <div class="card shadow-lg border-0 rounded-4 p-5 col-md-6 text-center otp-card">
      <h2 class="fw-bold text-success mb-4">
        <i class="bi bi-shield-lock"></i> Verify OTP
      </h2>
      <p class="text-muted mb-4">Please enter the OTP sent to your registered mobile number.</p>

      <!-- OTP Form -->
      <form method="post" action="/verifyotp" class="mt-3">
        {% csrf_token %}
        <div class="form-floating mb-4">
          <input type="text" name="otp" class="form-control shadow-sm text-center fs-5" id="otp" maxlength="6"
                 placeholder="Enter 6-digit OTP" required>
          <label for="otp">Enter OTP</label>
        </div>

        <button type="submit" class="btn btn-success w-100 py-2 rounded-pill shadow-sm">
          <i class="bi bi-check-circle"></i> Verify OTP
        </button>

        <p class="small text-muted mt-3 mb-0">
          Didn’t receive the OTP? <a href="#" class="text-success fw-semibold text-decoration-none">Resend</a>
        </p>
      </form>
    </div>
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #e8f5e9, #ffffff);
  }

  .otp-card {
    transition: all 0.3s ease-in-out;
    border-radius: 20px;
    background: #ffffff;
  }

  .otp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  }

  .form-control {
    border-radius: 12px;
    border: 1px solid #cfcfcf;
    height: 3.2rem;
    font-weight: 600;
    letter-spacing: 2px;
  }

  .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }

  .btn-success {
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-success:hover {
    background-color: #218838;
    transform: translateY(-2px);
  }

  .bi-shield-lock {
    font-size: 1.8rem;
  }

  @media (max-width: 768px) {
    .otp-card {
      margin: 0 15px;
      padding: 2rem;
    }
  }
</style>

{% endblock body %}